<template>
  <view class="content">
    <view class="login-form">
      <up-input
        v-model="loginForm.mobile"
        placeholder="请输入账号"
        prefixIcon="account"
        prefixIconStyle="font-size: 32rpx;color: #333"
      ></up-input>

      <up-input
        v-model="loginForm.password"
        style="margin-top: 28rpx"
        placeholder="请输入密码"
        prefixIcon="lock"
		type="password"
        prefixIconStyle="font-size: 32rpx;color: #333"
      ></up-input>
      <view class="login-btn" @click="handleLogin"> 立即登录 </view>
    </view>

    <text class="copright"> 技术支持:阿格斯科技有限公司 </text>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { login } from "@/api/index";
import { rsaEncrypt } from "@/utils/encrypt";
import { setToken, setUserInfo } from "@/utils/auth";
import { showToast } from "@/utils/index";
interface UserForm {
  mobile: string;
  password: string;
}
const loginForm = reactive<UserForm>({
  mobile: "",
  password: "",
});
const handleLogin = () => {
  login({ ...loginForm, password: rsaEncrypt(loginForm.password) }).then(
    (res) => {
      // 将res.data存入本地存储
      setToken(res.data.token);
      setUserInfo(JSON.stringify(res.data));
      //获取设备的宽高
      uni.getSystemInfo({
        success: function (res) {
          uni.setStorageSync("deviceWidth", res.windowWidth + "");
          uni.setStorageSync("deviceHeight", res.windowHeight + "");
        },
      });
      // uni.setStorageSync("userInfo", res.data);

      //登录成功
      showToast("登录成功");
      uni.setStorageSync("routeFrom", "user");
      //跳转到首页
      uni.navigateTo({
        url: "/pages/home/index",
      });
    }
  );
};
</script>

<style scoped lang="scss">
.content {
  width: 100vw;
  height: 100vh;
  background: url("@/static/images/login-bg.jpg") no-repeat;
  background-size: 100% 100%;
  position: relative;
  .login-form {
    position: absolute;
    top: 41.83%;
    left: 50%;
    transform: translate(-50%, 0);
  }
  .login-btn {
    width: 638rpx;
    height: 88rpx;
    margin-top: 70rpx;
    background: url("@/static/images/login-btn-bg.png") no-repeat;
    background-size: 100% 100%;
    text-align: center;
    line-height: 88rpx;
    font-size: 30rpx;
    color: #fff;
  }
  .copright {
    position: absolute;
    bottom: 68rpx;
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 24rpx;
    z-index: 999;
  }
}
// :deep(.u-border){
// 	border: 2rpx solid #587BF6 ;
// }
</style>
<style lang="scss">
.login-form {
  .u-input {
    background-color: #fff;
    border-color: #587bf6 !important;
  }
}
</style>
